<script setup lang="ts">
import { defineComponent, reactive, toRefs, watch, ref } from "vue";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
} from "@ant-design/icons-vue";

const state1 = reactive({
  collapsed: false,
  selectedKeys: ["1"],
  openKeys: ["sub1"],
  preOpenKeys: ["sub1"],
});

watch(
  () => state1.openKeys,
  (_val, oldVal) => {
    state1.preOpenKeys = oldVal;
  }
);
const state2 = reactive({
  collapsed: false,
  selectedKeys: ["1"],
  openKeys: ["sub1"],
  preOpenKeys: ["sub1"],
});

watch(
  () => state2.openKeys,
  (_val, oldVal) => {
    state2.preOpenKeys = oldVal;
  }
);
const toggleCollapsed1 = () => {
  state1.collapsed = !state1.collapsed;
  state1.openKeys = state1.collapsed ? [] : state1.preOpenKeys;
};
const toggleCollapsed2 = () => {
  state2.collapsed = !state2.collapsed;
  state2.openKeys = state2.collapsed ? [] : state2.preOpenKeys;
};
const callback = (val: any) => {
  console.log(val);
};

const tabdatas: any = ref([]);
const handleClick = (e: any) => {
  tabdatas.value.push({
    title: e.domEvent.target.textContent,
    content: e.keyPath,
    key: e.key,
  });
  let newArr = [];
  for (let i = 0; i < tabdatas.value.length; i++) {
    if (newArr.indexOf(tabdatas.value[i].key) == -1) {
      newArr.push(tabdatas.value[i].key);
    } else {
      tabdatas.value.splice(i, 1);
      i--;
    }
  }
  activeKey.value = e.key;
  console.log(activeKey.value);
};
const activeKey = ref("");
const removeTab = (targetKey: string) => {
  let lastIndex = 0;
  tabdatas.value.forEach((pane: any, i: number) => {
    if (pane.key === targetKey) {
      lastIndex = i - 1;
    }
  });
  tabdatas.value = tabdatas.value.filter((pane: any) => pane.key !== targetKey);
  if (tabdatas.value.length && activeKey.value === targetKey) {
    if (lastIndex >= 0) {
      activeKey.value = tabdatas.value[lastIndex].key;
    } else {
      activeKey.value = tabdatas.value[0].key;
    }
  }
};
const onEdit = (targetKey: string | MouseEvent, action: string) => {
  console.log(targetKey, action);

  if (action === "remove") {
    removeTab(targetKey as string);
  }
};
</script>

<template>
  <div class="main-box">
    <div class="public-flex-box">
      <div class="public-title-bold">深色菜单</div>
      <div
        class="menu-box deep-menu-box"
        :class="!state1.collapsed ? '' : 'menu-box-col'"
      >
        <div class="menu-title">
          <div v-if="!state1.collapsed" class="system-name">系统名称</div>
          <a-button class="icon-btn" @click="toggleCollapsed1">
            <MenuUnfoldOutlined v-if="state1.collapsed" />
            <MenuFoldOutlined v-else />
          </a-button>
        </div>
        <a-menu
          v-model:openKeys="state1.openKeys"
          v-model:selectedKeys="state1.selectedKeys"
          mode="inline"
          theme="dark"
          :inline-collapsed="state1.collapsed"
        >
          <a-menu-item key="1">
            <template #icon>
              <PieChartOutlined class="menu-icon" />
            </template>
            <span>Option 1</span>
          </a-menu-item>
          <a-menu-item key="2">
            <template #icon>
              <DesktopOutlined class="menu-icon" />
            </template>
            <span>Option 2</span>
          </a-menu-item>
          <a-menu-item key="3">
            <template #icon>
              <InboxOutlined class="menu-icon" />
            </template>
            <span>Option 3</span>
          </a-menu-item>
          <a-sub-menu key="sub1">
            <template #icon>
              <MailOutlined class="menu-icon" />
            </template>
            <template #title>Navigation One</template>
            <a-menu-item key="5">
              <i class="iconfont icon-quan"></i>Option 5</a-menu-item
            >
            <a-menu-item key="6"
              ><i class="iconfont icon-quan"></i>Option 6</a-menu-item
            >
            <a-menu-item key="7"
              ><i class="iconfont icon-quan"></i>Option 7</a-menu-item
            >
            <a-menu-item key="8"
              ><i class="iconfont icon-quan"></i>Option 8</a-menu-item
            >
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <template #icon>
              <AppstoreOutlined class="menu-icon" />
            </template>
            <template #title>Navigation Two</template>
            <a-menu-item key="9">
              <i class="iconfont icon-quan"></i>Option 9</a-menu-item
            >
            <a-menu-item key="10">
              <i class="iconfont icon-quan"></i>Option 10</a-menu-item
            >
            <a-sub-menu key="sub3" title="Submenu">
              <a-menu-item key="11">
                <i class="iconfont icon-quan"></i>Option 11</a-menu-item
              >
              <a-menu-item key="12">
                <i class="iconfont icon-quan"></i>Option 12</a-menu-item
              >
            </a-sub-menu>
          </a-sub-menu>
        </a-menu>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-title-bold">普通菜单</div>
      <div class="meun-tab">
        <div
          class="menu-box light-menu-box"
          :class="!state2.collapsed ? '' : 'menu-box-col'"
        >
          <div class="menu-title">
            <div v-if="!state2.collapsed" class="system-name">系统名称</div>
            <a-button class="icon-btn" @click="toggleCollapsed2">
              <MenuUnfoldOutlined v-if="state2.collapsed" />
              <MenuFoldOutlined v-else />
            </a-button>
          </div>
          <a-menu
            v-model:openKeys="state2.openKeys"
            v-model:selectedKeys="state2.selectedKeys"
            mode="inline"
            theme="light"
            :inline-collapsed="state2.collapsed"
            @click="handleClick"
          >
            <a-menu-item key="1">
              <template #icon>
                <PieChartOutlined class="menu-icon" />
              </template>
              <span>Option 1</span>
            </a-menu-item>
            <a-menu-item key="2">
              <template #icon>
                <DesktopOutlined class="menu-icon" />
              </template>
              <span>Option 2</span>
            </a-menu-item>
            <a-menu-item key="3">
              <template #icon>
                <InboxOutlined class="menu-icon" />
              </template>
              <span>Option 3</span>
            </a-menu-item>
            <a-sub-menu key="sub1">
              <template #icon>
                <MailOutlined class="menu-icon" />
              </template>
              <template #title>Navigation One</template>
              <a-menu-item key="5">
                <i class="iconfont icon-quan"></i>Option 5</a-menu-item
              >
              <a-menu-item key="6">
                <i class="iconfont icon-quan"></i>Option 6</a-menu-item
              >
              <a-menu-item key="7">
                <i class="iconfont icon-quan"></i>Option 7</a-menu-item
              >
              <a-menu-item key="8">
                <i class="iconfont icon-quan"></i>Option 8</a-menu-item
              >
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <template #icon>
                <AppstoreOutlined class="menu-icon" />
              </template>
              <template #title>Navigation Two</template>
              <a-menu-item key="9">
                <i class="iconfont icon-quan"></i>Option 9</a-menu-item
              >
              <a-menu-item key="10">
                <i class="iconfont icon-quan"></i>Option 10</a-menu-item
              >
              <a-sub-menu key="sub3" title="Submenu">
                <a-menu-item key="11">
                  <i class="iconfont icon-quan"></i>Option 11</a-menu-item
                >
                <a-menu-item key="12">
                  <i class="iconfont icon-quan"></i>Option 12</a-menu-item
                >
              </a-sub-menu>
            </a-sub-menu>
          </a-menu>
        </div>
        <div class="right-con">
          <div>
            <a-tabs
              v-model:activeKey="activeKey"
              type="editable-card"
              @edit="onEdit"
              @tabScroll="callback"
              v-if="tabdatas.length"
            >
              <a-tab-pane
                v-for="pane in tabdatas"
                :key="pane.key"
                :tab="pane.title"
                :closable="pane.closable"
              >
                {{ pane.content }}
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .menu-box {
    width: 260px;

    .menu-title {
      width: 100%;
      height: 52px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 20px;

      .system-name {
        color: #fff;
        font-size: 16px;
      }

      .icon-btn {
        background-color: transparent;
        border: none;
        color: #fff;
        font-size: 16px;
      }
    }
    ::v-deep .ant-menu-title-content {
      display: flex;
      align-items: center;
    }
    .icon-quan {
      font-size: 1px;
      padding-left: 15px;
      padding-right: 5px;
    }
    ::v-deep
      .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal)
      .ant-menu-item-selected {
      background-color: #1677ff;
    }
    ::v-deep .ant-menu.ant-menu-inline-collapsed > .ant-menu-item {
      height: 52px;
      line-height: 52px;
      padding: 0px 15px;
      margin: 0px;
      font-size: 16px;
    }
    ::v-deep
      .ant-menu.ant-menu-inline-collapsed
      > .ant-menu-submenu
      > .ant-menu-submenu-title {
      height: 52px;
      line-height: 52px;
      padding: 0px 15px;
      margin: 0px;
      font-size: 16px;
    }
    ::v-deep .ant-menu.ant-menu-inline-collapsed > .ant-menu-item .anticon {
      line-height: 30px;
    }
    ::v-deep .ant-menu.ant-menu-dark,
    .ant-menu-dark .ant-menu-sub,
    .ant-menu.ant-menu-dark .ant-menu-sub {
      background: transparent;
    }
    ::v-deep
      .ant-menu-inline.ant-menu-root
      .ant-menu-item
      > .ant-menu-title-content,
    .ant-menu-inline.ant-menu-root
      .ant-menu-submenu-title
      > .ant-menu-title-content {
      font-size: 16px;
    }
    ::v-deep .ant-menu.ant-menu-inline-collapsed {
      width: 60px;
    }
    ::v-deep .ant-menu-dark .ant-menu-inline.ant-menu-sub {
      background: transparent;
    }
  }
  .deep-menu-box {
    background-color: #000d2d;
    .menu-icon {
      width: 30px;
      height: 30px;
      text-align: center;
      border-radius: 4px;
      line-height: 30px;
      font-size: 16px;
      background-color: rgba(255, 255, 255, 0.2);
    }
    ::v-deep .ant-menu-dark .ant-menu-item,
    .ant-menu-dark .ant-menu-item-group-title,
    .ant-menu-dark .ant-menu-item > a,
    .ant-menu-dark .ant-menu-item > span > a {
      color: rgba(255, 255, 255, 0.85);
    }
    ::v-deep .ant-menu-dark .ant-menu-sub,
    .ant-menu .ant-menu-dark .ant-menu-sub {
      color: rgba(255, 255, 255, 0.85) !important;
    }
    ::v-deep .ant-menu.ant-menu-dark,
    .ant-menu-dark .ant-menu-sub,
    .ant-menu.ant-menu-dark .ant-menu-sub {
      color: rgba(255, 255, 255, 0.85);
    }
    ::v-deep .ant-menu-dark .ant-menu-item:hover,
    .ant-menu-dark .ant-menu-item-active,
    .ant-menu-dark .ant-menu-submenu-active,
    .ant-menu-dark .ant-menu-submenu-open,
    .ant-menu-dark .ant-menu-submenu-selected,
    .ant-menu-dark .ant-menu-submenu-title:hover {
      color: #fff;
    }
  }
  .meun-tab {
    display: flex;
    .light-menu-box {
      background-color: #fff;
      .system-name {
        color: rgba(0, 0, 0, 0.85) !important;
      }
      .icon-btn {
        color: rgba(0, 0, 0, 0.85) !important;
      }
      .menu-icon {
        // width: 30px;
        // height: 30px;
        // text-align: center;
        // border-radius: 4px;
        // line-height: 30px;
        // background-color: rgba(255, 255, 255, 0.2);
        font-size: 16px;
      }
      ::v-deep .ant-menu-item-selected {
        background-color: #e6f4ff;
        color: #1677ff;
      }
    }
    .right-con {
      flex: 1;
      ::v-deep .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap {
        height: 52px;
        line-height: 52px;
        display: flex;
        align-items: center;
        background: #fff;
      }
      ::v-deep .ant-tabs-tab-btn {
        transition: none;
      }
      ::v-deep .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
        padding: 0px 10px;
        height: 32px;
        line-height: 32px;
        background: #f7f7f7;
        border-color: #dddddd;
        margin-right: 10px;
      }
      ::v-deep .ant-tabs-tab:hover {
        color: #ffffff;
        background: #1677ff !important;
        .ant-tabs-tab-remove {
          color: #ffffff;
        }
      }
      ::v-deep
        .ant-tabs-card.ant-tabs-top
        > .ant-tabs-nav
        .ant-tabs-tab-active {
        background: #1677ff;
        .ant-tabs-tab-btn {
          color: #ffffff;
        }
        .ant-tabs-tab-remove {
          color: #ffffff;
        }
      }
      ::v-deep .ant-tabs-nav-add {
        display: none;
      }
    }
  }

  .menu-box-col {
    width: 60px;
  }
}
</style>
